<template>
  <div class="blog-category blog-section common-mobile-view">
    <span class="total">目前共计{{ blogStore.blogCategoryList.length }}个分类</span>

    <div class="category-list card-item">
      <div v-for="(item, index) in blogStore.blogCategoryList"
           :key="index" class="item" @click="viewBlogCategoryClick(item.name)">
        <i class="fa-solid fa-book"></i>
        <div class="content">
          <span class="label">{{ item.name }}</span>
          <span class="value">共 {{ item.count }} 篇文档</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBlogStore } from '@/store/blog.ts'
import { useAppStore } from '@/store/app.ts'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'

const blogStore = useBlogStore()
const appStore = useAppStore()
const router = useRouter()

onMounted(() => {
  blogStore.queryBlogCategory()
})

/**
 * 点击查看博客分类信息
 * @param name 类别名称
 */
const viewBlogCategoryClick = async (name: string) => {
  appStore.isShowMobileBack = true
  await router.push({ name: 'BlogCategoryName', params: { name } })
}
</script>

<style scoped lang="scss">
@use "@/styles/blog/blog.category.module";
</style>
